<template>
  <el-dialog
    title="课程详细信息"
    :visible.sync="isOpen"
    width="50%"
    append-to-body
    :destroy-on-close="true"
  >
    <el-descriptions class="margin-top" :column="4" border>
      <el-descriptions-item label="课程标题" :span="2">{{courseInfo.courseTitle}}</el-descriptions-item>
      <el-descriptions-item label="课程标签" :span="2">
        <my-tag :valStr="courseInfo.courseFlag" />
      </el-descriptions-item>
      <el-descriptions-item label="课程描述" :span="4">{{courseInfo.courseDesc}}</el-descriptions-item>
      <el-descriptions-item label="课程封面" :span="4">
        <el-image
          class="imgSize"
          :src="courseInfo.courseCover"
          :preview-src-list="[courseInfo.courseCover]"
        ></el-image>
      </el-descriptions-item>
      <el-descriptions-item label="开课时间" :span="2">
        <span>{{ parseTime(courseInfo.courseBeginDate, '{y}-{m}-{d} {h}:{i}') }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="结课时间" :span="2">
        <span>{{ parseTime(courseInfo.courseEndDate, '{y}-{m}-{d} {h}:{i}') }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="是否开课" :span="2">
        <dict-tag :options="dict.type.course_is_begin" :value="courseInfo.courseIsBegin" />
      </el-descriptions-item>
      <el-descriptions-item label="是否公开" :span="2">
        <dict-tag :options="dict.type.course_is_public" :value="courseInfo.courseIsPublic" />
      </el-descriptions-item>
      <el-descriptions-item label="创建时间" :span="2">
        <span>{{ parseTime(courseInfo.createTime, '{y}-{m}-{d} {h}:{i}') }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="更新时间" :span="2">
        <span>{{ parseTime(courseInfo.updateTime, '{y}-{m}-{d} {h}:{i}') }}</span>
      </el-descriptions-item>
    </el-descriptions>
    <div slot="footer" class="dialog-footer">
      <el-button @click="isOpen=false">取 消</el-button>
    </div>
  </el-dialog>
</template>
      
    <script>
export default {
  name: "CourseInfo",
  dicts: ["course_is_begin", "course_is_public"],
  props: {
    // 数据
    courseData: {
      type: Object,
      default: {}
    },
    // 是否展开
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      courseInfo: {}
    };
  },
  computed: {
    isOpen: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      }
    }
  },
  watch: {
    // 监听数据变化
    courseData(newVal, oldVal) {
      this.courseInfo = newVal;
    }
  }
};
</script>
<style scoped>
.imgSize {
  height: 54px;
  width: 96px;
  margin-left: 5px;
  margin-right: 5px;
}
</style>